﻿<!doctype html>
<html>
<head>
	<title></title>
	<!-- -->
	<link href="../source/button.css" rel="stylesheet" type="text/css" />
	<link href="../source/tab.css" rel="stylesheet" type="text/css" />
	<link href="../source/input.css" rel="stylesheet" type="text/css" />
	<!-- -->
	<script type="text/javascript">
		enyo = {};
	</script>
	<style>
		.unselectable {
			-webkit-user-select: none;
			-moz-user-select: none;
		}
		.unselectable ::selection {
			color: transparent;
		}
		body {
			font-family: Verdana, Arial, Helvetica, sans-serif;
			font-size: larger;
		}
	</style>
	<!-- -->
	<script src="../../../enyo/enyo.js" type="text/javascript"></script>
</head>
<body class="theme-fu unselectable">
	<button class="button">Button</button>
	<button class="button" style="font-size: x-large;">Button</button>
	<button class="button" style="font-size: larger">Loooooooooooooong Button</button>
	<hr/>
	<input class="input" value="smoo" style="font-size: large"/>
	<span style="margin-left: -48px; cursor: pointer; color: silver; border: 2px solid silver; border-radius: 24px; font-size: smaller;">&nbsp;?&nbsp;</span>
	&nbsp;
	<input class="input" value="smoo" style="font-size: large"/>
	<span style="margin-left: -48px; cursor: pointer; color: silver; border: 2px solid silver; border-radius: 24px; font-size: smaller;">&nbsp;X&nbsp;</span>
	<hr/>
	<script>
		document.write(
			new enyo.Control({
				components: [
					{style: "background-color: #D7D7D7; padding: 8px; text-align: center;", content: "Tabbar"},
					{classes: "tabbar", onmousedown: "tabbarSelect", components: [
						{classes: "active tab", content: "Tabitha"},
						{classes: "tab", content: "Tablature"},
						{classes: "tab", onmousedown: "tabSelect", components: [
							{tag: "span", content: "Tablet"},
							{tag: "span", content: " [ X ]", onmousedown: "closeDown", onclick: "closeClick"}
						]},
						{classes: "tab", content: "Sabitia"}
					]}
				],
				tabbarSelect: function(inSender, inEvent) {
					if (inEvent.dispatchTarget.container == inSender) {
						this.tabSelect(inEvent.dispatchTarget);
					}
				},
				tabSelect: function(inSender) {
					enyo.forEach(inSender.container.getClientControls(), function(inC) {
						inC.removeClass("active");
					});
					inSender.addClass("active");
				},
				closeDown: function(inSender, inEvent) {
					inEvent.stopPropagation();
					return true;
				},
				closeClick: function() {
					alert("Spoo");
				}
			}).generateHtml()
		);
	</script>
</body>
</html>
